<%@ page language="java" contentType="text/html; charset=UTF-8"	 pageEncoding="UTF-8"%>
<%@ include file="../include/laypublic.jsp"%>
<!DOCTYPE html>
<html>
<head>
  <title>费用登记新增</title>
</head>
<style>
	.fieldset{
		margin-top: 5px;
		margin-bottom: 0px
	}
	.layui-form-item {
	    margin-bottom: 5px;
	    clear: both;
	    *zoom: 1;
	}
	.layui-legend{
		background-color:#5fb878;
		font-size:15px !important;
		width:140px;
	}
	.layui-form-label{width: 170px;}
</style>
<body>
<div class="layui-fluid">
    <div class="layui-card">
	    <div class="layui-tab-item layui-show">
	    	<div style="padding-top:15px;">&nbsp;</div>
			<form class="layui-form" id="addInfo_form">
				<fieldset class="layui-elem-field layui-field-title fieldset"  id="baseInfo">
				  <legend class="layui-btn layui-legend" style="text-align:left;cursor:default;">费用基础信息  ></legend>
					<div style="margin-top:20px">
						<div class="layui-form-item">
						    <div class="layui-inline">
							    <label class="layui-form-label">登记公司</label>
						      	<div class="layui-input-inline">
									<input type="hidden" name="hrOrgId" value="${bindOrgId}">
									<input type="text" value="${bindOrgName}" style="border:0px;" readonly="readonly" class="layui-input">
						      	</div>
					      	</div>
					      	<div class="layui-inline">
						    	<label class="layui-form-label">登记部门</label>
					      		<div class="layui-input-inline">
					      			<input type="hidden" name="hrDeptId" value="${bindDeptId}">
									<input type="text" value="${bindDeptName}" style="border:0px;" readonly="readonly" class="layui-input">
					      		</div>
				      		</div>
				      		<div class="layui-inline">
						    	<label class="layui-form-label">登记人</label>
					      		<div class="layui-input-inline">
					        		<input type="hidden" name="hrStaffApplyId" value="${SESSION_KEY_USER_DETAIL.hrStaffId }">
					        		<input type="text" name="staffName" value="${staffName }" readonly="readonly" style="border:0px" autocomplete="off" class="layui-input">
					      		</div>
				      		</div>
			      		</div>			
				      	<div class="layui-form-item">
					  		<div class="layui-inline">
						      	<label class="layui-form-label">费用归属公司</label>
						      	<div class="layui-input-inline">
						      	<select id="add_select_proId" name="hrOrgBillId" lay-filter="add_select_proId" lay-verify="required" lay-search>
								      		<option value="">请选择-归属公司</option>
							      				<c:if test="${not empty orgInfos }">
							              			<c:forEach items="${orgInfos}" var="info">
							              				<option  value= "${info.id }" <c:if test="${info.compName == bindOrgName}">selected</c:if> >${info.compName }</option>
								            		</c:forEach>
							              		</c:if>
							      		</select>
						      	</div>
						    </div>
						    <div class="layui-inline">
						    	<label class="layui-form-label">费用期间</label>
					      		<div class="layui-input-inline">
					      			<input type="text" class="layui-input" id="beeDate" name="monthWithoutDay" readonly placeholder="费用期间" lay-verify="required">
					      		</div>
						    </div>
						    <div class="layui-inline">
						    	<label class="layui-form-label">登记类型</label>	
				            	<div class="layui-input-inline">
				              		<select name="noteType"  lay-filter="noteType" lay-verify="required">
						              	<option value="">请选择-登记类型</option>
						              	<option value="1">财务费用</option>
						              	<option value="2">管理费用</option>
						              	<option value="3">营销费用</option>
				              		</select>
				          		</div>
						    </div>
				    	</div>
						<div class="layui-form-item">
						    <label class="layui-form-label" >费用总额（元）</label>
					      	<div class="layui-input-inline">
								<div class="layui-input-inline">
				                    <input type="text"  id="beeAmount" name="beeAmount" lay-verify="required|floatNumber" 
				                          maxlength="13" onblur="isNumberFloat(this);arabiaToCN(this,1);" autocomplete="off" class="layui-input" placeholder="请输入费用总额" >
				                </div>
					      	</div>
		      			</div>
				  		<div class="layui-form-item">
						    <div class="layui-inline">
						    	<label class="layui-form-label">费用备注</label>
					      		<div class="layui-input-inline">
						      		<textarea name="memo" maxlength="500" placeholder="请输入费用备注"  class="layui-textarea" style="width:899px;"></textarea>
					      		</div>
						    </div>
					    </div>
				    	</div>
				    </fieldset>
				<div id="show_MX" class="layui-form-item" style="display: none;">
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 16px;">
                 	<legend class="layui-btn layui-legend" style="text-align:left;cursor:default;">费用类别明细></legend>
		 			<div class="layui-form-item">
						<div class="layui-inline">
		               			 <label class="layui-form-label" >人工费用（元）</label>
		               			 <div class="layui-input-inline">
		                 		   <input type="text" id="manFee" name="manFee" maxlength="13"  placeholder="请输入人工费用"
		                           autocomplete="off" class="layui-input" onblur="isNumberFloat(this);arabiaToCN(this,1);">
		                		</div>
		            	</div>
						<div class="layui-inline">
				                <label class="layui-form-label" >差旅费（元）</label>
				                <div class="layui-input-inline">
				                    <input type="text" id="travelFee" name="travelFee" maxlength="13"  placeholder="请输入差旅费"
				                           autocomplete="off" class="layui-input" onblur="isNumberFloat(this);arabiaToCN(this,1);">
				                </div>
			            </div>
			            <div class="layui-inline">
				                <label class="layui-form-label" >业务招待费（元）</label>
				                <div class="layui-input-inline">
				                    <input type="text" id="bizServeFee"  name="bizServeFee" maxlength="13"  placeholder="请输入业务招待费"
				                           autocomplete="off" class="layui-input" onblur="isNumberFloat(this);arabiaToCN(this,1);">
				                </div>
				         </div>
	          		</div>
					 <div class="layui-form-item">
						<div class="layui-inline">
				                <label class="layui-form-label" >办公费（元）</label>
				                <div class="layui-input-inline">
				                    <input type="text" id="officeFee"  name="officeFee" maxlength="13"  placeholder="请输入办公费"
				                           autocomplete="off" class="layui-input" onblur="isNumberFloat(this);arabiaToCN(this,1);"> 
				                </div>
				        </div>
						<div class="layui-inline">
				                <label class="layui-form-label" >其他费用（元）</label>
				                <div class="layui-input-inline">
				                    <input type="text" id="otherFee" name="otherFee" maxlength="13"  placeholder="请输入其他费用"
				                           autocomplete="off" class="layui-input" onblur="isNumberFloat(this);arabiaToCN(this,1);">
				                </div>
		            	</div>
		            </div>
	            	</fieldset>
            	</div>
			   <div class="layui-form-item" style="position: fixed ! important; right: 30px; bottom:45%;z-index:10000;">
					<div class="layui-input-block">
			      		<button class="layui-btn layui-bg-blue layui-btn-normal layui-btn-lg  layui-btn-radius" type="button" lay-submit lay-filter="addInfo_form_submit" id="addInfo_form_submit">
			      		<i class="layui-icon layui-icon-ok layuiadmin-button-btn"></i>
			      		提交
			      		</button>
			      	</div>
		      </div>			
			</form>
  		</div>
	</div>
</div>
  <script>

  layui.config({
    base: '${ctx}/resources/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'set', 'upload', 'element', 'laydate'], function(){
    var $ = layui.$
    ,form = layui.form
    ,element = layui.element
    ,laydate = layui.laydate
    ,upload = layui.upload;
    
 	// 正则校验
	form.verify({
		//验证汉字
	    CHS:[
	    	/^[\u0391-\uFFE5]+$/
	    	,'只能输入汉字'
	  	],
	  	//大于0的正整数
	  	intNumber:[
			/^[1-9]\d*$/
			,'请输入正确的数字'
	  	],
	  	//数字只能有两位小数
	  	floatNumber:[
			/^([-]?)([0-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/
			,'请输入正确的数字'
	  	],
	  	//数字大于等于0，并只能有两位小数
	  	floatAmount:[
			/^([0-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/
			,'请输入正确的数字'
	  	]
	});
 	
	//费用期间
	    laydate.render({
	      elem: '#beeDate'
	      ,type: 'month'
	      ,format:'yyyy-MM'
	    });
	
   	//监听提交
  	form.on('submit(addInfo_form_submit)', function(data){
  		$("#addInfo_form_submit").removeAttr("lay-submit").removeClass("layui-bg-blue").addClass("layui-btn-disabled");
  		layer.load();
  		
       	//提交 Ajax 成功后，静态更新表格中的数据
       	$.ajax({
           	type : 'post',
			url : basePath + '/feeNote/save',
           	data: $('#addInfo_form').serialize(),
			success:function(result){
				if(result.success){
					layer.closeAll('loading'); //关闭loading
					//两秒后关闭当前页面
					setTimeout(function(){
						/**
						 * 查找父菜单，并刷新
						 */
						var topDoc = $(window.top.document);
						var path = basePath + '/feeNote/list';
						// 获取页面名称
						var name = topDoc.find(".layui-nav-item [lay-href^='" + path + "']").text();
						if(name == '' || name == null){
							name = '费用登记';
						}
						window.parent.layui.index.openTabsPage(path, name);
						var iframe = window.parent.layui.admin.tabsBody(window.parent.layui.admin.tabsPage.index).find(".layadmin-iframe");
						iframe[0].contentWindow.location.reload(true);
						
						/**
						 * 关闭当前页
						 */
						var currPath = basePath + '/feeNote/add';
						var layid = topDoc.find("li[lay-id^='" + currPath + "']").attr('lay-id');
						window.parent.layui.element.tabDelete('layadmin-layout-tabs', layid);//关闭当前页
				        }, 2000);
				}else{
					layer.closeAll('loading'); //关闭loading
  					$("#addInfo_form_submit").removeClass("layui-btn-disabled").addClass("layui-bg-blue").attr("lay-submit","");
					layer.msg(result.msg,{icon: 7});
			  	}
			}
       	});
   	});  
 	// data-type事件
    $('.layui-btn.layuiadmin-btn-admin').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });
  	
  });
  //根据下拉选择不同显示不同的div
  layui.use(['form','layer','jquery'], function(){
      var $ = layui.jquery,
          layer = layui.layer,
          form = layui.form; 
      form.on('select(noteType)', function(data){
          var value = data.value;
          if(value == "" || value == "0"){
              $("#show_MX").hide();
              $("#manFee").val(0);
              $("#travelFee").val(0);
              $("#bizServeFee").val(0);
              $("#officeFee").val(0);
              $("#otherFee").val(0);
              $("#manFee").removeAttr("lay-verify");
              $("#travelFee").removeAttr("lay-verify");
              $("#bizServeFee").removeAttr("lay-verify");
              $("#officeFee").removeAttr("lay-verify");
              $("#otherFee").removeAttr("lay-verify");
              $("#beeAmount").removeAttr("readOnly","readOnly");
              $("#beeAmount").removeAttr("style");
              $("#beeAmount").attr("onblur","isNumberFloat(this);arabiaToCN(this,1);");
          }else if(value == "1"){
              $("#show_MX").hide();
              $("#manFee").val(0);
              $("#travelFee").val(0);
              $("#bizServeFee").val(0);
              $("#officeFee").val(0);
              $("#otherFee").val(0);
              $("#manFee").removeAttr("lay-verify");
              $("#travelFee").removeAttr("lay-verify");
              $("#bizServeFee").removeAttr("lay-verify");
              $("#officeFee").removeAttr("lay-verify");
              $("#otherFee").removeAttr("lay-verify");
              $("#beeAmount").removeAttr("readOnly");
              $("#beeAmount").removeAttr("style");
              $("#beeAmount").attr("onblur","isNumberFloat(this);arabiaToCN(this,1);");
          }else if(value == "2"){
              $("#show_MX").show();
              $("#beeAmount").attr("lay-verify","readonly|floatNumber");
              /* $('#beeAmount')[0].style.border="1px dashed "; */
              $("#manFee").attr("lay-verify","required|floatNumber");
              $("#travelFee").attr("lay-verify","required|floatNumber");
              $("#bizServeFee").attr("lay-verify","required|floatNumber");
              $("#officeFee").attr("lay-verify","required|floatNumber");
              $("#otherFee").attr("lay-verify","required|floatNumber");
              $("#beeAmount").val(0);
              $("#beeAmount").attr("readOnly","readOnly");
              $("#beeAmount").attr("style","border:0px");
          }else if(value == "3"){
              $("#show_MX").show();
              $("#beeAmount").attr("lay-verify","readonly|floatNumber")
             /*  $('#beeAmount')[0].style.border="1px dashed"; */
              $("#manFee").attr("lay-verify","required|floatNumber");
              $("#travelFee").attr("lay-verify","required|floatNumber");
              $("#bizServeFee").attr("lay-verify","required|floatNumber");
              $("#officeFee").attr("lay-verify","required|floatNumber");
              $("#otherFee").attr("lay-verify","required|floatNumber");
              $("#beeAmount").val(0);
              $("#beeAmount").attr("readOnly","readOnly");
              $("#beeAmount").attr("style","border:0px");
          }
      })
  });
  
	function isNumberFloat(obj){
		var $ = layui.$;
		if (obj.value == '' || obj.value == null) {
			return;
		}
		var rgx = /^([-]?)([0-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/;
		var boolrgx = rgx.test(obj.value);// true 
		if (!boolrgx){
			obj.value=0;
			layer.msg('请输入正确数字，且保留两位小数！');
			return;
		}
		var name = obj.name;
		if(name != 'beeAmount'){
			beeAmountAmount();
		}
	}
  
  //计算收入合计
  function beeAmountAmount(){
		var $ = layui.$;
		var manFee= $("#manFee").val();
		var travelFee = $("#travelFee").val();
		var bizServeFee = $("#bizServeFee").val();
		var officeFee = $("#officeFee").val();
		var otherFee   = $("#otherFee").val();
		
		var beeAmount = 0;//费用总额
		if(manFee != '' && parseFloat(manFee) > 0 || parseFloat(manFee) <= 0){
			beeAmount = parseFloat(beeAmount) + parseFloat(manFee);
			beeAmount = beeAmount.toFixed(2);
		}
		if(travelFee != '' && parseFloat(travelFee) > 0 || parseFloat(travelFee) <= 0){
			beeAmount = parseFloat(beeAmount) + parseFloat(travelFee);
			beeAmount = beeAmount.toFixed(2);
		}
		if(bizServeFee != '' && parseFloat(bizServeFee) > 0 || parseFloat(bizServeFee) <= 0){
			beeAmount = parseFloat(beeAmount) + parseFloat(bizServeFee);
			beeAmount = beeAmount.toFixed(2);
		}
		if(officeFee != '' && parseFloat(officeFee) > 0 || parseFloat(officeFee) <= 0){
			beeAmount = parseFloat(beeAmount) + parseFloat(officeFee);
			beeAmount = beeAmount.toFixed(2);
		}
		
		if(otherFee != '' && parseFloat(otherFee) > 0 || parseFloat(otherFee) <= 0){
			beeAmount = parseFloat(beeAmount) + parseFloat(otherFee);
			beeAmount = beeAmount.toFixed(2);
		}
		
		$("#beeAmount").val(beeAmount); 
	}
  
  </script>
</body>
</html>